<template>
    <div class="book-detail-local-history">
        <router-link
            :to="`/ContentDisplay/BookDetail/${bookData.id}?f=DigitalJournal&code=digital-journal`"
        >
            <img class="book-seal" :src="bookData.cover" alt="封面"/>
        </router-link>
        <div class="book-info-box">
            <router-link
                class="book-info-item book-title"
                :to="`/ContentDisplay/BookDetail/${bookData.id}?f=DigitalJournal&code=digital-journal`"
            >
                {{bookData.title || '--'}}
            </router-link>
            <div class="book-info-item">{{`提供机构：${bookData.from || '--'}`}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "BookDetailLocalHistoryComponent",
    props:{
        bookData:{
            type:Object,
            default(){
                return {}
            }
        }
    }

}
</script>



<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:35vw;
    @height:60vw;
    .book-detail-local-history{
        width:@width;
        height:@height;
        .book-seal{
            width: @width;     //160px
            height: calc(@height - 10vw);  //200px
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
            display:block;
            object-fit:cover;
        }
        .book-info-box{
            width:@width;
            height:10vw;
            .book-info-item{
                font-weight: normal;
                color: #000000;
                height: 5vw;
                line-height: 5vw;
                font-size: 3vw;
                .line-ellipsis(1);
            }
            .book-title{
                font-weight: bold;
            }
        }
    }
}

//pc
@media only screen and (min-width:576px){
    @width:140px;
    @height:240px;
    .book-detail-local-history{
        width:@width;
        height:@height;
        .book-seal{
            width: @width;     //160px
            height: calc(@height - 40px);  //200px
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
            display:block;
            object-fit:cover;
        }
        .book-info-box{
            width:@width;
            height:40px;
            .book-info-item{
                font-weight: normal;
                color: #000000;
                height:20px;
                line-height: 20px;
                font-size: 10px;
                .line-ellipsis(1);
            }
            .book-title{
                font-weight: bold;
            }
        }
    }
}
</style>